<!--  -->
<template>
  <div>
    <div class="user">
      <div style="margin-bottom: 5px">
        <el-input
          placeholder="请输入用户名"
          style="width: 300px"
          v-model="searchText"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-button style="margin-left: 5px" type="primary" @click="searchUser"
          >搜索
        </el-button>
        <el-button style="margin-left: 5px" type="success" @click="getAll"
          >加载全部
        </el-button>
      </div>

      <el-table :data="users" border stripe height="600">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="userName" label="用户名"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="realName" label="真实姓名"></el-table-column>
        <el-table-column prop="sex" label="性别"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="danger"
              @click="delUser(scope.$index, users, scope.row)"
              >删除<i class="el-icon-delete el-icon--right"></i
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination></el-pagination>
    </div>
  </div>
</template>

<script>
import { getAllUser, delUserById, searchUserByUserName } from "@/api/users";
import { Message } from "element-ui";
export default {
  name: "",
  props: [""],
  data() {
    return {
      users: null,
      searchText: "",
    };
  },
  components: {},
  computed: {},
  created() {
    this.getAll()
  },
  beforeMount() {},
  mounted() {},
  methods: {
    searchUser() {
      this.searchText == ""
        ? Message.error("请输入用户名")
        : searchUserByUserName(this.searchText).then((res) => {
            res.code === 20000
              ? (this.users = res.data)
              : Message.error("加载数据失败" + res.message);
          });
    },
    getAll() {
      getAllUser().then((res) => {
        res.code === 20000
          ? (this.users = res.data)
          : Message.error("加载数据失败" + res.message);
      });
    },
    delUser(index, rows, row) {
      delUserById(row.id).then((res) => {
        res.code === 20000
          ? rows.splice(index, 1)
          : Message.error("删除失败" + res.message);
      });
    },
  },
  watch: {},
};
</script>

<style lang='css' scoped>
.user {
  margin: 15px;
}
</style>